<template>
    <!-- vip上方会员信息 -->
    <el-card shadow="never">
        <div>会员专区</div>
        <div class="topVip">
            <div class="vipMain">
                <div class="vipItem user">
                    <img class="vip"
                        src="https://rs.dance365.com/default_head@3x.png?imageView2/0/w/100/h/100/format/webp/ignore-error/1" />
                    <div class="right">
                        <div class="vipNum">你还哦啊实打实</div>
                        <div class="viptext">开通会员尊享10大特权</div>
                    </div>
                </div>
                <div class="vipItem">
                    <img class="vip" src="https://rs.dance365.com/teach_video_free.png" />
                    <div class="right">
                        <p>
                            以下<i>{{categoryS.VideoList.totalElements}}</i>个会员专区课程
                            <br>全部免费学习
                        </p>

                    </div>
                </div>
                <div class="vipItem">
                    <img class="vip" src="https://rs.dance365.com/member_preferential.png" />
                    <div class="right">
                        <p>
                            购买非会员专区课程
                            <br>可获会员立减优惠
                        </p>
                    </div>
                </div>
                <div class="vipItem">
                    <div class="right vipO">
                        <button>立即开通</button>
                        <div class="openVip">查看/开通</div>
                    </div>
                </div>
            </div>

        </div>
        <!-- card body -->
    </el-card>
    <!-- 中间分类信息 -->
    <el-card shadow="never" style="margin-top:10px;">
        <div class="categoryContainer" :class="cate==true?'fold':''" lazy>
            <el-row class="category" :gutter="20" v-for="(Catetitle,index) in categoryS.Categorylsit" :key="index">
                <el-col class="categoryTitle" :span="2">{{Catetitle.label}}:</el-col>
                <el-col class="categoryList" :span="22">
                    <div class="select-item" :class=" CatLight.includes(item.id) ? 'active-cate':''"
                        @click="handlerCateItem(Catetitle.name,item.id)" v-for="(item,index) in Catetitle.choises"
                        :key="item.id">{{item.name}}</div>
                </el-col>
            </el-row>
            <!-- 日历 -->
            <!-- <el-row class="category" :gutter="20">
                <el-col class="categoryTitle" :span="2">兴趣爱好:</el-col>
                <el-col class="categoryList" :span="22">
                 
           <el-date-picker v-model="timer"  type="daterange" range-separator="-" start-placeholder="开始日期"
          end-placeholder="结束日期" size="small" />
                </el-col>
            </el-row> -->
        </div>
        <p class="shensuo" @click="handleCateFlex">
            <span>{{cate==true?'展开全部':'收起'}}</span>
        </p>
    </el-card>
    <!-- 控制视频排序nav -->
    <el-card shadow="never" style="margin-top: 10px; margin-bottom: 10px; height: 70px;">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" active-text-color="#f93684"
            style="font-size:14px; margin-top: -12px; border-bottom:none !important;" @select="handleSelect">
            <el-menu-item :class="naVideo==1?'light':''" index="1" v-if="naVideo==1">综合销量</el-menu-item>
            <el-menu-item index="1" v-else @click="zongHandler">综合</el-menu-item>

            <el-menu-item index="2" :class="naVideo==2?'light':''" v-if="naVideo==2">销量从高到低</el-menu-item>
            <el-menu-item index="2" v-else @click="Sale">销量</el-menu-item>
            <el-menu-item index="3" :class="naVideo==3?'light':''" v-if="naVideo==3">浏览量由高到低</el-menu-item>
            <el-menu-item index="3" v-else @click="glanceHand">浏览量</el-menu-item>

            <el-sub-menu index="4">
                <template #title>价格</template>
                <el-menu-item index="2-1" @click="priceTop_lod">价格由高到低</el-menu-item>
                <el-menu-item index="2-2" @click="priceLod_top">价格由低到高</el-menu-item>

            </el-sub-menu>
            <el-menu-item index="5" :class="naVideo==5?'light':''" v-if="naVideo==5">发布时间由远及近</el-menu-item>
            <el-menu-item index="5" v-else @click="createTime">发布时间</el-menu-item>
        </el-menu>
    </el-card>
    <!-- 视频内容 -->
    <div class="card_content_wrapper">
        <div class="loadMoreList" v-loading="loading">
            <div class="content_card_item" v-for="(video,index) in categoryS.Content0" :key="video.id">
                <!-- 视频内容 -->
                <div class="card_item">
                    <!-- 视频图片 -->
                    <div class="card-top" v-lazy-container="{ selector: 'img' }">
                        <img class="cover" :data-src="video.cover" alt="">
                        <!-- <img class="cover" v-lazy src="./imgs/R-C (6).jpg" alt=""> -->
                        <!-- 播放按钮 -->
                        <!-- <img class="play" data-src="./imgs/4d.png" alt=""> -->
                        <span>视频课</span>
                    </div>
                    <img class="play" src="./imgs/4d.png" alt="">

                    <div class="card-bottom">
                        <div class="card-bottom-top">
                            <div class="video-text">
                                <span>{{video.title}}</span>
                            </div>
                            <div class="price-zan">
                                <span class="price">￥{{video.moreBackup.price}}</span>
                                <span class="zan">{{Math.ceil(video.maxP * 1000)}}人点赞</span>
                            </div>
                            <div class="vip-video">
                                <img src="./imgs/vip_free@3x.png" alt="">
                            </div>
                            <div class="myZan">
                                <svg t="1666139214246" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="4652" width="14" height="14">
                                    <path
                                        d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                                        p-id="4653"></path>
                                </svg>
                                <span>{{video.favorableValue}}</span>
                                <svg t="1666139352255" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="5643" width="14" height="14">
                                    <path
                                        d="M622.56056 464.834794c0 27.928073 22.73684 50.64854 50.664913 50.64854 27.956725 0 50.693566-22.720468 50.693566-50.64854 0-27.928073-22.73684-50.66389-50.693566-50.66389C645.2974 414.171927 622.56056 436.907745 622.56056 464.834794"
                                        p-id="5644"></path>
                                    <path
                                        d="M931.254178 211.459063c0-40.637536-33.05893-73.698512-73.728188-73.698512L166.471964 137.76055c-40.637536 0-73.727165 33.059953-73.727165 73.698512l0 506.796488c0 40.637536 33.088606 73.696466 73.727165 73.696466l251.16846 0 94.343715 94.28641 94.315062-94.28641 251.226788 0c40.669258 0 73.728188-33.05893 73.728188-73.696466l0-82.560344-0.089028-1.282203L931.254178 211.459063zM875.96699 695.220928c0 22.88522-18.558681 41.444924-41.443901 41.444924L579.446623 736.665853l-67.462484 67.490114-67.430762-67.490114L189.506587 736.665853c-22.88522 0-41.4746-18.559705-41.4746-41.444924L148.031986 234.493685c0-22.88522 18.58938-41.488927 41.4746-41.488927l645.01548 0c22.88522 0 41.443901 18.603707 41.443901 41.488927l0 396.579247 0 36.161594L875.965967 695.220928z"
                                        p-id="5645"></path>
                                    <path
                                        d="M461.321272 464.834794c0 27.928073 22.735817 50.64854 50.662867 50.64854 27.929096 0 50.66389-22.720468 50.66389-50.64854 0-27.928073-22.734794-50.66389-50.66389-50.66389C484.057089 414.171927 461.321272 436.907745 461.321272 464.834794"
                                        p-id="5646"></path>
                                    <path
                                        d="M300.083008 464.834794c0 27.928073 22.735817 50.64854 50.66389 50.64854 27.927049 0 50.662867-22.720468 50.662867-50.64854 0-27.928073-22.735817-50.66389-50.662867-50.66389C322.817802 414.171927 300.083008 436.907745 300.083008 464.834794"
                                        p-id="5647"></path>
                                </svg>
                                <span>15</span>
                                <svg t="1666139387021" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="6647" width="14" height="14">
                                    <path
                                        d="M512 150.25664c7.1424 0 20.224 2.2272 27.59168 17.152l81.24416 164.61312a82.0224 82.0224 0 0 0 61.78816 44.91264l181.69344 26.40384c16.46592 2.39104 22.6304 14.14656 24.83712 20.9408 2.20672 6.79424 4.13184 19.92192-7.7824 31.5392l-131.48672 128.16384a82.03776 82.03776 0 0 0-23.58272 72.61184l31.03744 180.96128c1.6128 9.41568-0.54272 17.72032-6.40512 24.6784-6.08256 7.21408-15.01696 11.52-23.90016 11.52-4.83328 0-9.5232-1.2288-14.336-3.7632l-162.49856-85.43232a82.35008 82.35008 0 0 0-38.19008-9.43104c-13.25056 0-26.45504 3.26144-38.17984 9.42592L311.31648 869.9904c-4.75136 2.49856-9.5744 3.7632-14.336 3.7632-8.88832 0-17.8176-4.30592-23.90016-11.51488-5.8624-6.95808-8.01792-15.26272-6.40512-24.6784l31.03744-180.95104a82.03264 82.03264 0 0 0-23.59808-72.6272l-131.4816-128.16896c-11.91424-11.61728-9.99424-24.74496-7.7824-31.5392 2.20672-6.79424 8.36608-18.54464 24.83712-20.9408l181.69344-26.39872a81.9968 81.9968 0 0 0 61.7728-44.88192l81.25952-164.64384c7.36256-14.9248 20.44416-17.152 27.58656-17.152m0-71.79264c-36.57728 0-73.15968 19.05664-91.96544 57.16992L338.77504 300.27776a10.25536 10.25536 0 0 1-7.72096 5.61152L149.36064 332.288c-84.11648 12.22144-117.7088 115.59936-56.83712 174.92992l131.47648 128.15872c2.41664 2.3552 3.52256 5.74976 2.94912 9.07776l-31.03744 180.96128c-11.37152 66.29376 41.30304 120.12032 101.06368 120.12032 15.76448 0 32.04096-3.75296 47.744-12.0064l162.51392-85.43744a10.28096 10.28096 0 0 1 9.54368 0l162.51392 85.43744c15.70816 8.25856 31.96928 12.0064 47.744 12.0064 59.75552 0 112.43008-53.8368 101.06368-120.12032l-31.03744-180.96128a10.26048 10.26048 0 0 1 2.94912-9.07776l131.47648-128.15872c60.87168-59.33056 27.27936-162.70848-56.83712-174.92992l-181.69344-26.40384a10.25536 10.25536 0 0 1-7.72096-5.61152L603.97568 135.6288c-18.816-38.10816-55.3984-57.1648-91.97568-57.1648z"
                                        fill="#666666" p-id="6648"></path>
                                </svg>
                                <span>20</span>
                            </div>
                        </div>
                        <div class="card-bottom-don">
                            <div class="botton-text">
                                <img class="userAva" :src="video.creatorBackup.avatar" alt="">
                                <span>{{video.creatorBackup.name}}</span>
                                <img src="" alt="">
                            </div>
                            <div class="date">{{dayjs(video.createTime).format('YY-MM-DD')}}</div>
                        </div>
                    </div>
                </div>
                <!---->
                <!---->
            </div>
        </div>
        <!-- 加载更多-->
        <div class="load_more_btn_wrapper" style="" v-loading="loading">
            <span @click="load" v-if="categoryS.videoLength!=categoryS.totalVideoLe" class="load_more_btn"
                style="">加载更多</span>
            <div style="color: rgb(204, 204, 204); text-align: center; padding-top: 20px; display: none;">—
                没有更多内容啦 —
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
import dayjs from "dayjs"
import { ElLoading } from 'element-plus'
import { ref, onMounted, nextTick } from "vue"
import { ElMessage } from 'element-plus'
import categoryL from "../../store/course/course"

let categoryS = categoryL()
// 定义是否加载标识
let loading = ref(false)



// 收集发请求需要的数据
// 一页多少数据
let pageSize = ref<number>(20)
// 当前页
let pageNum = ref<number>(0)

onMounted(() => {
    // 挂载的时候请求分类数据
    categoryS.getCategoryList()
    //   挂载的时候请求一次视频数据
    categoryS.getVideoList(pageSize.value, pageNum.value, {})

})

// 控制视频高亮标识
let naVideo = ref<number>(1)

// 存储选择的内容参数
let filterInfo = ref([])
let params = ref({
    filterCode: '',
    filterValue: []
},
)
// 分类信息高亮标志位
let CatLight = ref([])
// 定义标志位，对分类信息进行展开和收起
let cate = ref(true)
// 收集时间数据
let timer = ref([])
// 控制展开和收起的回调
const handleCateFlex = () => {
    cate.value = !cate.value
}
// 加载更多
const load = () => {
    loading.value = true
    categoryS.getVideoList(pageSize.value, pageNum.value + 1, { filterInfo: filterInfo.value })
    nextTick(() => {
        setTimeout(() => {
            //将第一页数据合并和剩下页数据合并
            categoryS.Content0.push.apply(categoryS.Content0, categoryS.ContenF)
            loading.value = false
        }, 1000)
    })


}


// 点击分类的内容 ClassName  ClasItem [id]
const handlerCateItem = (ClassName, ClasItem) => {
    /* 
      ClassName--点击的大类别名
      ClasItem---点击的具体内容
    */
     // 显示加载
     loading.value = true

    // 上来直接去判断大数组中有没有类别名字
    const item = filterInfo.value.find(item => item.filterCode == ClassName);
    // 没有就将数据加进去
    if (!item) {

        let arr = [];
        arr.push(ClasItem);
        filterInfo.value.push({ filterCode: ClassName, filterValue: arr })
        // 高亮显示
        CatLight.value.push(ClasItem)
       
        // 发请求
        categoryS.getVideoList(pageSize.value, pageNum.value, { filterInfo: filterInfo.value })
        loading.value = false
        // console.log(filterInfo.value)  //=======
        return;
    }
    //   有就判断一下里里面点击同类别的数组长度是否大于3个
    if (item?.filterValue?.length >= 3) {

        let repeat = item.filterValue.find(item => item === ClasItem);
        if (repeat) {
            // 查找索引重复元素索引--删除元素
            let index = item.filterValue.indexOf(repeat)
            //删除元素
            item.filterValue.splice(index, 1)
            // 取消高亮
            CatLight.value.splice(index, 1)
            // 发请求
            categoryS.getVideoList(pageSize.value, pageNum.value, { filterInfo: filterInfo.value })
            //    console.log(filterInfo.value); //========
            loading.value = false
            return
        }
        ElMessage.warning('同种类别只能选择三个选项')
        loading.value = false
        return;
    }
    //如果小于三个，判断已经有的是否重复-重复就删除掉，
    // filter取反，返回不重复的，将不重复的从新压入
    let repeat = item.filterValue.find(item => item === ClasItem);
    if (repeat) {
        // 如果长度小于3--判断点击的是不是同一个
        // 查找索引重复元素索引--删除元素

        let index = item.filterValue.indexOf(repeat)
        item.filterValue.splice(index, 1)
        // 取消高亮
        CatLight.value.splice(index, 1)
        // 发请求
        categoryS.getVideoList(pageSize.value, pageNum.value, { filterInfo: filterInfo.value })
        //    console.log(filterInfo.value); //=====
        loading.value = false
        return
    }
    //不重复就继续加进去--点击的内容
    item.filterValue.push(ClasItem);
    // 高亮显示
    CatLight.value.push(ClasItem)
    // 发请求
    categoryS.getVideoList(pageSize.value, pageNum.value, { filterInfo: filterInfo.value })
    //console.log(filterInfo.value) //=======

    loading.value = false

}
// 点击综合
const zongHandler = () => {
    // 0是综合高亮
    naVideo.value = 0
    // 发送请求
    categoryS.getVideoList(pageSize.value, pageNum.value, {})
}
// 点击销量
const Sale = () => {
    naVideo.value = 2
    // 发送销量请求
    categoryS.getSale(pageSize.value, pageNum.value)
}
// 点击浏览量
const glanceHand = () => {
    naVideo.value = 3
    categoryS.getGlance(pageSize.value, pageNum.value)
}
// 点击高到低价格
const priceTop_lod = () => {
    categoryS.getLod_top(pageSize.value, pageNum.value)
}
// 点击价格低到高
const priceLod_top = () => {
    categoryS.getLod_top(pageSize.value, pageNum.value)
}
// 点击发布时间
const createTime = () => {
    naVideo.value = 5
    categoryS.getTime(pageSize.value, pageNum.value)
}
</script>

<style scoped>
/* 版心 */
.main {
    width: 1200px;
    height: 10000px;
    margin: 0 auto;
    margin-top: 15px;


}

/* vip导航 */
.topVip {}

.vipMain {
    display: flex;
    height: 70px;
}

.vipItem {
    width: 390px;
    margin-left: 30px;

    display: flex;
    align-items: center;
}

.vip {
    margin-right: 10px;
    width: 50px;
    height: 50px;
}

.vipItem .vipNum {
    padding-top: 4px;
    font-size: 16px;

}

.vipItem .viptext {
    margin-top: 8px;
    font-size: 12px;
    color: #f93684;
}

.right p {
    font-size: 16px;
    text-align: center;
}

.right p i {
    color: #f93684;
}

/* 最右侧开通vip */
.right button {
    width: 80px;
    height: 32px;
    background: rgb(252, 59, 130);
    border: none;
    color: white;
    border-radius: 20px;
    display: block;
    margin-bottom: 8px;
}

.right .openVip {
    color: #7d8090;
    font-size: 12px;
}

.vipO {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user .vip {
    border-radius: 50%;
}
</style>
<style scoped>
/* 视频 */
.card_content_wrapper {
    margin-top: 20px;
    padding-bottom: 20px;
}

.light {
    color: #f93684;
}

.card_content_wrapper .loadMoreList {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: auto;
    margin-right: auto;
}

.content_card_item {
    /* border: solid 1px red; */
    padding: 0 8px;
    box-sizing: border-box;
    border-radius: 4px;
}

.card_item {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    width: 224px;
    height: 300px;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 4px;
    position: relative;
}

.card-top {
    width: 100%;
    height: 126px;
    position: relative;
    /* border-radius: 4px; */
}

.card-top .cover {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

/* 鼠标滑过视频图片 */
.card-top .cover:hover {
    opacity: .6;
}

.play {
    position: absolute;
    top: 80px;
    left: 15px;
    display: inline-block;
    width: 30px;
    height: 30px;
}

.card-top span {
    position: absolute;
    color: #fff;
    top: 82px;
    right: 10px;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .6);
}

.card-bottom {
    width: 100%;

}

.card-bottom-top {
    width: 100%;
    height: 125px;
    display: flex;
    padding: 0px 6px;
    box-sizing: border-box;
    flex-direction: column;
    border-bottom: 1px solid #b1b5c1;
}

.video-text {
    font-size: 14px;
    color: #111;
    padding-top: 10px;
    /* padding-bottom: 0; */
    line-height: 18px;
    height: 45px;
    /* 两行出现省略号 */
    box-sizing: border-box;

}

.video-text span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /** 多行文本溢出...*/
    overflow: hidden;
}

.price-zan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 8px 6px; */
    box-sizing: border-box;
}

.price-zan span {
    display: inline-block;

}

.price-zan .price {
    color: #f93684;
    font-size: 16px;
}

.price-zan .zan {
    font-size: 12px;
    color: #b1b5c1;
}

.vip-video img {
    display: inline-block;
    width: 38px;
    height: 14px;
}

.card-bottom-don {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-bottom-don .botton-text span {
    display: inline-block;
    line-height: 50px;
    font-size: 12px;
    margin-left: 8px;
}

.botton-text {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 6px;
    box-sizing: border-box;
}

.botton-text .userAva {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.date {
    font-size: 12px;
    color: #b1b5c1;
    padding-right: 5px;
    box-sizing: border-box;
}

.myZan {
    display: flex;
    font-size: 12px;
    align-items: center;
    height: 28px;
    margin-bottom: 20px;
}

.myZan .icon {
    margin-right: 5px;
}

.myZan span {
    display: inline-block;
    margin-right: 20px;
}

/* 加载更多 */
.load_more_btn {
    display: block;
    width: 140px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #82858e;
    border: 1px solid #eaecf0;
    border-radius: 4px;
    background: #fff;
    text-align: center;
    margin: 20px auto 0;
    cursor: pointer;
}

/* 控制视频 */
/deep/.is-active {
    background-color: white !important;
    border-bottom: none !important;
}

/deep/.el-menu-item:hover {
    background-color: white !important;
    color: #f93684 !important;
}

/* 日期框选中颜色 */
/deep/.is-active {
    --el-input-focus-border-color: #f93684;
}

/* 分类样式 */
.categoryContainer {
    overflow: hidden;
}

/* 展开和收起 */
.fold {
    height: 150px;
}

.shensuo {
    text-align: center;
    color: #f93684;
    font-size: 14px;
    margin: 20px 0 0;
}

.category {
    display: flex;
    align-items: center;
}

.categoryTitle {
    color: #b1b5c1;
    padding: 7px 0;
    font-size: 14px;
    box-sizing: border-box;
}

.categoryList {
    /* border:none; */
    /* display: flex; */
}

.select-item {
    display: inline-block;
    cursor: pointer;
    font-size: 14px;
    color: #7d8090;
    margin-right: 24px;
    margin-bottom: 10px;
    margin-top: 8px;
    padding: 7px 13px;
    border-radius: 4px;
}

.active-cate {
    background: #f93684;
    color: #fff;
}
</style>